<template>
	<view class="collect">
		<view class="tis" v-if="browseList.length===0">
			<image src="../../static/img/菜篮子.jpg" mode="widthFix"></image>
			<!-- <view>还没有添加菜品~</view> -->
		</view>
    <view class="main">
      <foodlist :menu="browseList"></foodlist>
    </view>
    <!-- 右下角按钮 -->
    <view class="float_button">
      <uni-icons type="trash-filled" color="white" size="30" @click="handleClear"></uni-icons>
    </view>
	</view>
</template>

<script>

  import foodlist from '@/components/foodlist/foodlist.vue'
	import {
		user_collect_list
	} from '@/api/user_collect.js'

  import {
    browse_record, user_info,browse_clear
  } from '@/api/user'
  import UniIcons from "@/components/uni/uni-icons/uni-icons.vue";


	export default {
    components: {
      UniIcons,
      foodlist
    },
		data() {
			return {
        userId:0,
				browseList: [],
        //fab的设置
        fabList: [{
          bgColor: '#E9A06F',
          text: '动态',
          fontSize: 28,
          color: '#fff'
        }]
			}
		},
		onLoad() {
			this.getUserBrowseRecord()
      user_info({}).then(res=>{
        console.log(res.data)
        this.userId=res.data.id
      })
		},
		methods: {
      //点击右下角tab按钮
      handleClear() {
      //   获取List中所有ID
        console.log(this.userId)
        //   确认是否删除
        uni.showModal({
          title: '提示',
          content: '确定删除所有浏览记录吗？',
          success: (res) => {
            if (res.confirm) {
            browse_clear({userId:this.userId}).then(res=>{
              uni.showToast({
                title:"清除成功"
              })
              this.getUserBrowseRecord()
            })
            }
          }
        });
      },

			getUserBrowseRecord() {
				browse_record({}).then(res => {
					this.browseList = res.data

				})
			},
			getCollectList() {
				user_collect_list({}).then(res => {
					this.menus = res.data
				})
			},

			linktomenudetail(item) {
				uni.navigateTo({
					url: '/pages/fooddetail/fooddetail?foodId=' + item.foodId
				})
			}
		},
		computed: {

		}
	}
</script>

<style lang="scss">
.float_button{
  width: 160upx;
  height: 160upx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 200upx;
  right: 40upx;
  background: var($uni-color-primary);
}
	.collect {
		.tis {
			image {
				margin-left: 100rpx;
				margin-top: -200rpx;
				width: 600rpx;
			}
		}

		.item {
			margin: 0 25rpx;

			.img {
				image {
					width: 700rpx;
					height: 400rpx;
					border-radius: 16rpx;
					background-size: cover;
				}
			}

			.txt {
				width: 100%;
				line-height: 60rpx;
				margin: 10rpx 0 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				color: #000;
			}
		}
	}
</style>